<template>
  <div class="password-new">
    <div>
      <el-row style="border-bottom: 1px solid #cccccc; margin-bottom: 20px;"><h1>会员管理系统-找回密码</h1></el-row>
      <el-row>
        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" status-icon>
          <el-row><el-button class="go-back-btn" type="text" @click="goBack()">返回登录</el-button></el-row>
          <el-row v-show="visible">
            <el-form-item prop="companyName" label="公司全称"><el-input v-model="dataForm.companyName" placeholder="公司全称"></el-input></el-form-item>
            <el-form-item prop="managerName" label="管理员姓名"><el-input v-model="dataForm.managerName" placeholder="管理员姓名"></el-input></el-form-item>
            <el-form-item prop="managerMobile" label="管理员电话">
              <el-input v-model="dataForm.managerMobile" placeholder="管理员手机号" maxlength="11" type="number"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                class="btn-submit"
                type="primary"
                @click="checkCompany()"
                :disabled="dataForm.companyName == '' || dataForm.managerName == '' || dataForm.managerMobile == '' || dataForm.managerMobile.length != 11"
              >
                下一步
              </el-button>
            </el-form-item>
          </el-row>
          <el-row v-show="!visible">
            <el-form-item prop="code" label="验证码">
              <br />
              <el-row>
                <el-col :span="18"><el-input v-model="dataForm.code" placeholder="短信验证码"></el-input></el-col>
                <el-col :span="6">
                  <el-button type="primary" @click="sendCodeHandle()">{{ codeTip }}</el-button>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item prop="password" label="新密码"><el-input v-model="dataForm.password" type="password" placeholder="新密码"></el-input></el-form-item>
            <el-form-item prop="confirmPassword" label="确认密码"><el-input v-model="dataForm.confirmPassword" type="password" placeholder="确认密码"></el-input></el-form-item>
            <el-form-item>
              <el-col :span="12" style="padding: 0 20px;"><el-button class="btn-submit" type="primary" @click="visible = true">上一步</el-button></el-col>
              <el-col :span="12" style="padding: 0 20px;"><el-button class="btn-submit" type="success" @click="dataFormSubmit()">重置密码</el-button></el-col>
            </el-form-item>
          </el-row>
        </el-form>
      </el-row>
    </div>
    <el-dialog :title="'二次验证'" :close-on-click-modal="false" width="100%" :visible.sync="captchaVisible" @closed="cancel">
      <el-form>
        <el-form-item>
          <el-row :gutter="20">
            <el-col :span="14"><el-input v-model="captcha" placeholder="验证码"></el-input></el-col>
            <el-col :span="10" class="login-captcha"><img :src="captchaPath" @click="getCaptcha()" alt="" /></el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer"><el-button type="primary" :disabled="sendCodeDisabled || captcha == ''" @click="sendCode()">确定</el-button></span>
    </el-dialog>
  </div>
</template>

<script>
import { getUUID } from '@/utils';
export default {
  data() {
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号不能为空'));
      } else {
        const reg = /^1[2|3|4|5|7|8|9][0-9]\d{8}$/;
        console.log(reg.test(value));
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error('请输入正确的手机号'));
        }
      }
    };
    return {
      visible: true,
      captchaVisible: false,
      sendCodeDisabled: false,
      dataForm: {
        companyName: '',
        managerName: '',
        managerMobile: '',
        code: '',
        password: '',
        confirmPassword: ''
      },
      tmpData: {},
      uuid: '',
      captcha: '',
      captchaPath: '',
      codeTip: '获取验证码',
      dataRule: {
        companyName: [{ required: true, message: '公司全称不能为空', trigger: 'blur' }],
        managerName: [{ required: true, message: '管理员姓名不能为空', trigger: 'blur' }],
        managerMobile: [{ validator: checkPhone, trigger: 'blur' }],
        code: [{ required: true, message: '验证码不能为空', trigger: 'blur' }],
        password: [{ required: true, message: '新密码不能为空', trigger: 'blur' }],
        confirmPassword: [{ required: true, message: '确认密码不能为空', trigger: 'blur' }]
      }
    };
  },
  created() {},
  methods: {
    // 提交表单
    dataFormSubmit() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl('/sys/password/new'),
            method: 'post',
            data: this.$http.adornData({
              companyName: this.dataForm.companyName,
              managerName: this.dataForm.managerName,
              managerMobile: this.dataForm.managerMobile,
              code: this.dataForm.code,
              password: this.dataForm.password,
              confirmPassword: this.dataForm.confirmPassword
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message.success('密码重置成功');
              this.$router.replace({ name: 'login' });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
    // 检查公司
    checkCompany() {
      this.$http({
        url: this.$http.adornUrl('/merchant/company/check'),
        method: 'post',
        data: this.$http.adornData({
          companyName: this.dataForm.companyName,
          managerName: this.dataForm.managerName,
          managerMobile: this.dataForm.managerMobile
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.visible = false;
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    goBack() {
      this.$router.replace({ name: 'login' });
    },
    cancel() {
      this.uuid = '';
      this.captcha = '';
    },
    sendCodeHandle() {
      this.tmpData.isSending = this.tmpData.isSending || false;
      if(this.tmpData.isSending){
        return
      }
      this.captchaVisible = true;
      this.captcha = '';
      this.getCaptcha();
    },
    // 发送验证码
    sendCode() {
      if (this.captcha == '') {
        this.$message.error('请输入验证码');
        return;
      }

      //防止用户多次点击获取验证码
      this.tmpData.isSending = this.tmpData.isSending || false;
      if(this.tmpData.isSending){
        return
      }

      this.sendCodeDisabled = true;
      this.tmpData.isSending = true;
      this.tmpData.interval = 60;
      this.codeTip = this.tmpData.interval+"s"
      this.$http({
        url: this.$http.adornUrl('/sys/sms/send'),
        method: 'post',
        data: this.$http.adornData({
          mobile: this.dataForm.managerMobile,
          uuid: this.uuid,
          captcha: this.captcha,
          type: 2
        })
      })
        .then(({ data }) => {
          this.sendCodeDisabled = false;
          if (data && data.code === 0) {
            this.captchaVisible = false
            // 发送成功
            let timer = setInterval(() => {
              this.tmpData.interval -= 1;
              this.codeTip = this.tmpData.interval + 's';
              if (this.tmpData.interval <= 0) {
                clearInterval(timer);
                this.codeTip = '重新获取'
                this.tmpData.isSending = false;
              }
            }, 1000);
          } else {
            this.codeTip = '重新获取'
            this.tmpData.isSending = false;
            this.$message.error(data.msg);
            this.getCaptcha();
          }
        })
        .catch(() => {
          this.codeTip = '重新获取'
          this.tmpData.isSending = false;
          this.sendCodeDisabled = false;
        });
    },
    // 获取验证码
    getCaptcha() {
      this.uuid = getUUID();
      this.captchaPath = this.$http.adornUrl(`/captcha.jpg?uuid=${this.uuid}`);
    }
  }
};
</script>

<style scoped lang="scss">
.password-new {
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;

  > div {
    margin: 0 auto;
    width: 470px;
    margin-top: 50px;
    display: -webkit-flex;
    flex-direction: column;
    justify-content: center;
  }

  .go-back-btn {
    margin-bottom: 20px;
    float: right;
  }

  .btn-submit {
    width: 100%;
  }
  /* 谷歌 */
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
  }
}
.login-captcha {
  overflow: hidden;
  > img {
    width: 100%;
    cursor: pointer;
  }
}
</style>

<style>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
}
</style>
